<script lang="ts" setup>
import router from '@/router';
import { useGovernmentStore } from '@/stores/governmentLinkData.ts';
import { useResearchStore } from '@/stores/researchLinkData.ts';
import { HomeOutlined } from '@ant-design/icons-vue';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '相关链接', path: '' },
];

// Pinia
const governmentStore = useGovernmentStore();
const researchStore = useResearchStore();

const updateGovernment = () => {
  governmentStore.updateGovernmentLink();
};
const updateResearch = () => {
  researchStore.updateResearchLink();
};
updateGovernment();
updateResearch();

function goToLink(link: string) {
  // 在新标签页中打开链接
  window.open(link, '_blank');
}

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span>当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <span class="ml-4 cursor-pointer" @click="goBack">【返回上一页】</span>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-shadow mt-4 bg-white p-4">
      <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
        <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
          <span class="mx-4 text-xl font-bold text-white">政府部门</span>
        </div>
      </div>
      <div v-if="governmentStore.getLinkSets.length > 0" class="mt-2 min-h-[250px] bg-white">
        <div v-if="governmentStore.getLinkLoading" class="loading-container">
          <div class="loader"></div>
        </div>

        <div v-loading="governmentStore.getLinkLoading">
          <a-list
            :data-source="governmentStore.getLinkSets"
            :loading="governmentStore.getLinkLoading"
            :pagination="governmentStore.pagination"
          >
            <template #renderItem="{ item }">
              <a-list-item class="cursor-pointer">
                <span class="text-base hover:text-blue-500" @click="goToLink(item.url)">{{
                  item.description
                }}</span>
                <template #actions>
                  <span>{{ item.time }}</span>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
      <el-empty v-else class="m-auto" description="暂无数据" />
    </div>

    <div class="table-shadow mt-4 bg-white p-4">
      <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
        <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
          <span class="mx-4 text-xl font-bold text-white">研究论文</span>
        </div>
      </div>
      <div v-if="governmentStore.getLinkSets.length > 0" class="mt-2 min-h-[150px] bg-white">
        <div v-if="researchStore.getLinkLoading" class="loading-container">
          <div class="loader"></div>
        </div>

        <div v-loading="researchStore.getLinkLoading">
          <a-list
            :data-source="researchStore.getLinkSets"
            :loading="researchStore.getLinkLoading"
            :pagination="researchStore.pagination"
          >
            <template #renderItem="{ item }">
              <a-list-item class="cursor-pointer">
                <span class="text-base hover:text-blue-500" @click="goToLink(item.url)">{{
                  item.description
                }}</span>
                <template #actions>
                  <span>{{ item.time }}</span>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
      <el-empty v-else class="m-auto" description="暂无数据" />
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
